<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速查</title>
    <script src="./vue.min.js"></script>
    <style>
        body{
            background-color: #282923;
            color: #ffffff;
        }
        .title{
            font-size: 20px;
        }
        .input_title{
            background-color: #282923;
            border: none;
            border-bottom: 1px solid #ffffff;
            color: #ffffff;
            padding: 2px 3px;
            outline: none;
            width: 60px;
            text-align: center;
            margin: 0px 5px;
            font-size: 20px;
        }
        .input_text{
            background-color: #282923;
            border: 1px solid #ffffff;
            color: #ffffff;
            padding: 2px 3px;
            outline: none;
            width: 20px;
            text-align: center;
        }
        .row{
            display: flex;
        }
        .column{
            display: flex;
            flex-direction: column;
        }
        .container{
            padding: 10px;
        }
        p{
            padding: 0px;
            margin: 0px;
        }
        .input_result{
            background-color: #282923;
            border: none;
            border-bottom: 1px solid #ffffff;
            width: 100px;
            outline: none;
            color: #ffffff;
            font-size: 18px;
        }
    </style>
</head> 
<body>
    <div id="app">
        <div class="title">排列五 第<input type="text" class="input_title" maxlength="5" value="21000">期</div>
        <div class="row">
            <div class="container">
                <p>头</p>
                <input class="input_text" type="text" v-model="tou_one_1" maxlength="1"> - <span>{{tou_one_num_1}}</span> - <span>{{tou_one_result_1}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_2" maxlength="1"> - <span>{{tou_one_num_2}}</span> - <span>{{tou_one_result_2}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_3" maxlength="1"> - <span>{{tou_one_num_3}}</span> - <span>{{tou_one_result_3}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_4" maxlength="1"> - <span>{{tou_one_num_4}}</span> - <span>{{tou_one_result_4}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_5" maxlength="1"> - <span>{{tou_one_num_5}}</span> - <span>{{tou_one_result_5}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_6" maxlength="1"> - <span>{{tou_one_num_6}}</span> - <span>{{tou_one_result_6}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_7" maxlength="1"> - <span>{{tou_one_num_7}}</span> - <span>{{tou_one_result_7}}</span><br>
                <input class="input_text" type="text" v-model="tou_one_8" maxlength="1"> - <span>{{tou_one_num_8}}</span> - <span>{{tou_one_result_8}}</span><br>
            </div>
            <div class="container">
                <p>尾</p>
                <input class="input_text" type="text" v-model="wei_one_1" maxlength="1"> - <span>{{wei_one_num_1}}</span> - <span>{{wei_one_result_1}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_2" maxlength="1"> - <span>{{wei_one_num_2}}</span> - <span>{{wei_one_result_2}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_3" maxlength="1"> - <span>{{wei_one_num_3}}</span> - <span>{{wei_one_result_3}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_4" maxlength="1"> - <span>{{wei_one_num_4}}</span> - <span>{{wei_one_result_4}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_5" maxlength="1"> - <span>{{wei_one_num_5}}</span> - <span>{{wei_one_result_5}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_6" maxlength="1"> - <span>{{wei_one_num_6}}</span> - <span>{{wei_one_result_6}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_7" maxlength="1"> - <span>{{wei_one_num_7}}</span> - <span>{{wei_one_result_7}}</span><br>
                <input class="input_text" type="text" v-model="wei_one_8" maxlength="1"> - <span>{{wei_one_num_8}}</span> - <span>{{wei_one_result_8}}</span><br>
            </div>
        </div>
        <div class="row">
            <div class="container">
                <p>百位</p>
                <input class="input_text" type="text" v-model="bai_one_1" maxlength="1"> - <span>{{bai_one_num_1}}</span> - <span>{{bai_one_result_1}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_2" maxlength="1"> - <span>{{bai_one_num_2}}</span> - <span>{{bai_one_result_2}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_3" maxlength="1"> - <span>{{bai_one_num_3}}</span> - <span>{{bai_one_result_3}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_4" maxlength="1"> - <span>{{bai_one_num_4}}</span> - <span>{{bai_one_result_4}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_5" maxlength="1"> - <span>{{bai_one_num_5}}</span> - <span>{{bai_one_result_5}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_6" maxlength="1"> - <span>{{bai_one_num_6}}</span> - <span>{{bai_one_result_6}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_7" maxlength="1"> - <span>{{bai_one_num_7}}</span> - <span>{{bai_one_result_7}}</span><br>
                <input class="input_text" type="text" v-model="bai_one_8" maxlength="1"> - <span>{{bai_one_num_8}}</span> - <span>{{bai_one_result_8}}</span><br>
            </div>
            <div class="container">
                <p>十位</p>
                <input class="input_text" type="text" v-model="shi_one_1" maxlength="1"> - <span>{{shi_one_num_1}}</span> - <span>{{shi_one_result_1}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_2" maxlength="1"> - <span>{{shi_one_num_2}}</span> - <span>{{shi_one_result_2}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_3" maxlength="1"> - <span>{{shi_one_num_3}}</span> - <span>{{shi_one_result_3}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_4" maxlength="1"> - <span>{{shi_one_num_4}}</span> - <span>{{shi_one_result_4}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_5" maxlength="1"> - <span>{{shi_one_num_5}}</span> - <span>{{shi_one_result_5}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_6" maxlength="1"> - <span>{{shi_one_num_6}}</span> - <span>{{shi_one_result_6}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_7" maxlength="1"> - <span>{{shi_one_num_7}}</span> - <span>{{shi_one_result_7}}</span><br>
                <input class="input_text" type="text" v-model="shi_one_8" maxlength="1"> - <span>{{shi_one_num_8}}</span> - <span>{{shi_one_result_8}}</span><br>
            </div>
        </div>
        <br>
        <div class="column">
            <div>无头 <input type="text" maxlength="10" class="input_result" v-model="result_wu_tou">&emsp;&emsp;有头 <span>{{result_you_tou}}</span></div>
            <div>无百 <input type="text" maxlength="10" class="input_result" v-model="result_wu_bai">&emsp;&emsp;有百 <span>{{result_you_bai}}</span></div>
            <div>无十 <input type="text" maxlength="10" class="input_result" v-model="result_wu_shi">&emsp;&emsp;有十 <span>{{result_you_shi}}</span></div>
            <div>无尾 <input type="text" maxlength="10" class="input_result" v-model="result_wu_wei">&emsp;&emsp;有尾 <span>{{result_you_wei}}</span></div>
        </div>
    </div>
    <script>
        function result_all(str){
            var num='0123456789';
            var num_result=num.split("");
            var arr_result=str.replace(/(.)(?=.*\1)/g,"").split("");
            function getArrDifference(arr1,arr2){return arr1.concat(arr2).filter(function(v,i,arr){return arr.indexOf(v)===arr.lastIndexOf(v)})};
            var result=getArrDifference(num_result,arr_result);
            return result.sort().join("");
        }
        
        function result_if(num){
            var obj = "";
            if(num === '0'){
                obj = '890125'
            }else if(num === '1'){
                obj = '901236'
            }else if(num === '2'){
                obj = '012347'
            }else if(num === '3'){
                obj = '123458'
            }else if(num === '4'){
                obj = '234569'
            }else if(num === '5'){
                obj = '345670'
            }else if(num === '6'){
                obj = '456781'
            }else if(num === '7'){
                obj = '567892'
            }else if(num === '8'){
                obj = '678903'
            }else if(num === '9'){
                obj = '789014'
            }
            return obj;
        }

        new Vue({
            el: "#app",
            data: {
                tou_one_1: '',
                tou_one_2: '',
                tou_one_3: '',
                tou_one_4: '',
                tou_one_5: '',
                tou_one_6: '',
                tou_one_7: '',
                tou_one_8: '',

                bai_one_1: '',
                bai_one_2: '',
                bai_one_3: '',
                bai_one_4: '',
                bai_one_5: '',
                bai_one_6: '',
                bai_one_7: '',
                bai_one_8: '',

                shi_one_1: '',
                shi_one_2: '',
                shi_one_3: '',
                shi_one_4: '',
                shi_one_5: '',
                shi_one_6: '',
                shi_one_7: '',
                shi_one_8: '',

                wei_one_1: '',
                wei_one_2: '',
                wei_one_3: '',
                wei_one_4: '',
                wei_one_5: '',
                wei_one_6: '',
                wei_one_7: '',
                wei_one_8: '',

                result_wu_tou: '',
                result_wu_bai: '',
                result_wu_shi: '',
                result_wu_wei: '',
            },
            computed: {
                tou_one_num_1: function(){return result_if(this.tou_one_1);},
                tou_one_num_2: function(){return result_if(this.tou_one_2);},
                tou_one_num_3: function(){return result_if(this.tou_one_3);},
                tou_one_num_4: function(){return result_if(this.tou_one_4);},
                tou_one_num_5: function(){return result_if(this.tou_one_5);},
                tou_one_num_6: function(){return result_if(this.tou_one_6);},
                tou_one_num_7: function(){return result_if(this.tou_one_7);},
                tou_one_num_8: function(){return result_if(this.tou_one_8);},
                tou_one_result_1: function(){return result_all(this.tou_one_num_1);},
                tou_one_result_2: function(){return result_all(this.tou_one_num_2);},
                tou_one_result_3: function(){return result_all(this.tou_one_num_3);},
                tou_one_result_4: function(){return result_all(this.tou_one_num_4);},
                tou_one_result_5: function(){return result_all(this.tou_one_num_5);},
                tou_one_result_6: function(){return result_all(this.tou_one_num_6);},
                tou_one_result_7: function(){return result_all(this.tou_one_num_7);},
                tou_one_result_8: function(){return result_all(this.tou_one_num_8);},

                bai_one_num_1: function(){return result_if(this.bai_one_1);},
                bai_one_num_2: function(){return result_if(this.bai_one_2);},
                bai_one_num_3: function(){return result_if(this.bai_one_3);},
                bai_one_num_4: function(){return result_if(this.bai_one_4);},
                bai_one_num_5: function(){return result_if(this.bai_one_5);},
                bai_one_num_6: function(){return result_if(this.bai_one_6);},
                bai_one_num_7: function(){return result_if(this.bai_one_7);},
                bai_one_num_8: function(){return result_if(this.bai_one_8);},
                bai_one_result_1: function(){return result_all(this.bai_one_num_1);},
                bai_one_result_2: function(){return result_all(this.bai_one_num_2);},
                bai_one_result_3: function(){return result_all(this.bai_one_num_3);},
                bai_one_result_4: function(){return result_all(this.bai_one_num_4);},
                bai_one_result_5: function(){return result_all(this.bai_one_num_5);},
                bai_one_result_6: function(){return result_all(this.bai_one_num_6);},
                bai_one_result_7: function(){return result_all(this.bai_one_num_7);},
                bai_one_result_8: function(){return result_all(this.bai_one_num_8);},
                
                shi_one_num_1: function(){return result_if(this.shi_one_1);},
                shi_one_num_2: function(){return result_if(this.shi_one_2);},
                shi_one_num_3: function(){return result_if(this.shi_one_3);},
                shi_one_num_4: function(){return result_if(this.shi_one_4);},
                shi_one_num_5: function(){return result_if(this.shi_one_5);},
                shi_one_num_6: function(){return result_if(this.shi_one_6);},
                shi_one_num_7: function(){return result_if(this.shi_one_7);},
                shi_one_num_8: function(){return result_if(this.shi_one_8);},
                shi_one_result_1: function(){return result_all(this.shi_one_num_1);},
                shi_one_result_2: function(){return result_all(this.shi_one_num_2);},
                shi_one_result_3: function(){return result_all(this.shi_one_num_3);},
                shi_one_result_4: function(){return result_all(this.shi_one_num_4);},
                shi_one_result_5: function(){return result_all(this.shi_one_num_5);},
                shi_one_result_6: function(){return result_all(this.shi_one_num_6);},
                shi_one_result_7: function(){return result_all(this.shi_one_num_7);},
                shi_one_result_8: function(){return result_all(this.shi_one_num_8);},

                wei_one_num_1: function(){return result_if(this.wei_one_1);},
                wei_one_num_2: function(){return result_if(this.wei_one_2);},
                wei_one_num_3: function(){return result_if(this.wei_one_3);},
                wei_one_num_4: function(){return result_if(this.wei_one_4);},
                wei_one_num_5: function(){return result_if(this.wei_one_5);},
                wei_one_num_6: function(){return result_if(this.wei_one_6);},
                wei_one_num_7: function(){return result_if(this.wei_one_7);},
                wei_one_num_8: function(){return result_if(this.wei_one_8);},
                wei_one_result_1: function(){return result_all(this.wei_one_num_1);},
                wei_one_result_2: function(){return result_all(this.wei_one_num_2);},
                wei_one_result_3: function(){return result_all(this.wei_one_num_3);},
                wei_one_result_4: function(){return result_all(this.wei_one_num_4);},
                wei_one_result_5: function(){return result_all(this.wei_one_num_5);},
                wei_one_result_6: function(){return result_all(this.wei_one_num_6);},
                wei_one_result_7: function(){return result_all(this.wei_one_num_7);},
                wei_one_result_8: function(){return result_all(this.wei_one_num_8);},

                result_you_tou: function(){return result_all(this.result_wu_tou)},
                result_you_bai: function(){return result_all(this.result_wu_bai)},
                result_you_shi: function(){return result_all(this.result_wu_shi)},
                result_you_wei: function(){return result_all(this.result_wu_wei)},
            }
        });
    </script>
</body>
</html>